import Input from '../../components/input/input';
import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { useForm } from 'react-hook-form';

export const Register = () => {
  interface IFormData {
    email: string;
    password: string;
    fullName: string;
  }
  const form = useForm<IFormData>();
  /* для  DevTool зависимостью является control*/
  const { register, control, handleSubmit } = form;
  const { ref, name, onBlur, onChange } = register();
  const onSubmit = (data: IFormData) => {
  	console.log(data);
  };
  return (
  	<div>
  		{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
  		<h2>Регистрация</h2>
  		<form className={styles.form}>
  			<div className={styles.input}>
  				<label htmlFor="email">Ваш email</label>
  				<Input id="email" name="email" placeholder="Email" />
  			</div>
  			<div className={styles.input}>
  				<label htmlFor="password">Ваш пароль</label>
  				<Input
  					{...register('lastName')}
  					id="password"
  					name="password"
  					type="password"
  					placeholder="Пароль"
  				/>
  			</div>
  			<div className={styles.input}>
  				<label htmlFor="fullName">Ваше имя</label>
  				<Input id="fullName" name="fullName" placeholder="Имя" />
  			</div>
  			<Button appearance="big">Зарегистрироваться</Button>
  		</form>

  		<div className={styles.navigation}>
  			<div>
          Есть аккаунт?{' '}
  				<Link
  					style={{ color: '#ffa600' }}
  					className={styles.href}
  					to="/auth/login"
  				>
            Войти
  				</Link>
  			</div>
  			<div>
  				<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
  				</Link>
  			</div>
  		</div>
  	</div>
  );
};
